<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="views/layui/css/layui.css">
<script type="text/javascript" src="views/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="views/layui/layui.all.js"></script>
<title>Laypage</title>
</head>
<body>
<input type="hidden" id="total" name="count" value="${num}"/>
<input type="hidden" id="curr" name="curr" value="${curr}"/>
	<div id="laypage1"></div>
</body>
<script>
function demo(curr){
	var total = "$(#total)";
	var curr = "$(#curr)";
	  $.getJSON("hello/listDataJson", {
	 currentpage: 1 //向服务端传的参数，此处只是演示
	  }, function(res){ // 服务器返回的 json 结果
	    
	     
	    //显示分页
	   layui.use("laypage",function(){
		   var laypage = layui.laypage;
		   
		   laypage.render({
			   elem: 'laypage1', // 容器
			      pages:total ,   // 总页数(后台的)
			      curr:curr, //当前页(后台获取到的)
			      jump: function(obj, first){ //触发分页后的回调(单击页码后)
			        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
			        	 demo(obj.curr); 
			        }
			      }
		   });
	   });
	  });
	 };
	 // 初始化运行
	demo();
</script>

</html>